@charset "utf-8";
@import "_reset";
@function p($px){
    @return $px/2+px
    
}
//手机页面
.mobile{
    background: #fff;
    width: 100%;
    //头部
    header{
        overflow: hidden;
        //logo
        .logo{
            float: left;
            width: p(123);
            height: p(123);
            overflow: hidden;
            margin-left: p(28);
            margin-top: p(17);
            margin-right: p(23);
            img{
                height: 100%;
            }
        }
        //头部下拉框
        .sel{
            float: right;
            margin-right: p(21);
            margin-top: p(47);
            width: p(163);
            height: p(60);
            border: p(3) solid #ff9344;
            position: relative;
            select{
                border: none;
                 /*将默认的select选择框样式清除*/
                   appearance:none;
                   -moz-appearance:none;
                   -webkit-appearance:none;
                   background: transparent;
                   width: 100%;
                   height: 100%;
                   padding-left: p(14);
            }
            //下拉框小三角
            &::after{
                position: absolute;
                top: p(22);
                right: p(11);
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: p(16) solid #ff9344;
                border-right: p(16) solid transparent;
                border-left: p(16) solid transparent;
            }
            
        }
        //搜索框
        .search{
            width: p(268);
            height: p(55);
            border: 1px solid #ff9446;
            border-radius: p(22);
            margin: 0 auto;
//          line-height: p(55);
            margin-top: p(51);
            
            input[type="text"]{
                width: p(171);
                height: p(45);
                vertical-align: middle;
                border: none;
                font-size: p(24);
//              line-height: p(45);
                margin-left: p(28);
                padding-left: p(5);
                margin-top: p(5);
            }
            input[type="image"]{
                width:p(36) ;
                height: p(34);
                vertical-align: middle;
                border: none;
                margin-left: p(15);
            }
        }
    }
    //主题内容
    section{
        overflow-y: scroll;
        
       //轮播图
        .kt{
            margin-top: p(9);
            margin-bottom: p(33);
            width: 100%;
            .img{
                width: 100%;
                height: p(285);
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
        }
        //团购优惠
        .team_shop{
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
              //团购优惠头
            .shop_top{
                width: 100%;
                overflow: hidden;
                margin-bottom: p(11);
                .teamshop{
                    width:p(56) ;
                    height: p(54);
                    overflow: hidden;
                    float: left;
                    margin-left: p(21);
                    margin-right: p(8);
                    margin-bottom: p(5);
                    vertical-align: middle;
                    img{
                        height: 100%;
                    }
                }
                //左侧标题
                h1{
                    float: left;
                    font-size: p(30);
                    height: P(60);
                    line-height: p(60);
                    vertical-align: middle;
                }
                //右侧标题
                h2{
                    float: right;
                    font-size: p(24);
                    height: p(60);
                    line-height: p(60);
                    vertical-align: middle;
                }
                //更多
                .more{
                    float: right;
                    margin-right: p(21);
                    margin-left: p(8);
                    vertical-align: middle;
                    margin-top: 7px;
                    .img{
                        width: p(25);
                        height: p(26);
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                }
                
            }
            .ul1{
//              margin-left: p(78);
                overflow: hidden;
                margin-top: p(11);
                width:p(582);
                margin: 0 auto;
                
               
                li{
                    margin-bottom: p(30);
                     float: left;
                    
                    .img{
                        width:p(241) ;
                        height:p(95) ;
                        overflow: hidden;
                        img{
                            height: 100%;
                        }
                    }
                }
                li:nth-child(2n-1){
                    float: left;
                }
                 li:nth-child(2n){
                    float: right;
                }
            }
        }
        //猜你喜欢
        .like{
            width: 100%;
            //猜你喜欢头部
            .like_top{
                width: 100%;
                height: p(49);
                overflow: hidden;
                margin-bottom: p(34);
                .heart{
                    width: p(55);
                    height: p(49);
                    overflow: hidden;
                    float: left;
                    margin: 0 p(20);
                    img{
                        height: 100%;
                    }
                    
                }
                h1{
                    float: left;
                    font-size: p(30);
                    height:p(49) ;
                    line-height: p(49);
                }
                .more{
                    float: right;
                    width: p(25);
                    height: p(26);
                    overflow: hidden;
                    margin-right: p(21);
                    margin-left: p(8);
                    img{
                        width: 100%;
                    }
                    
                }
                h2{
                    float: right;
                    font-size: p(24);
                    color: #000;
                     height:p(49) ;
                    line-height: p(49);
                    margin-top: p(-6);
                    
                }
            }
            //猜你喜欢主体
            .like_main{
                width: 100%;
               
                //图片
                .shousi{
                    overflow: hidden;
                    height: p(164);
                     margin-top: p(30);
                    .img{
                        width:p(211) ;
                        height: p(164);
                        overflow: hidden;
                        float: left;
                        margin: 0 p(20);
                        vertical-align: middle;
                          img{
                              height: 100%;
                        }
                    }
                    //价格
                    .price{
                        vertical-align: middle;
                        height: p(164);
                        h2{
                            font-size: p(30);
                            margin-bottom: p(21);
                            
                        }
                        p{
                           font-size: p(22); 
                           color: #494949;
                        }
                        .p_price{
                           font-size: p(32); 
                           color: #ff9344;
                           margin-top: p(23);
                        }
                    } 
                    //右侧距离兰
                    .juli{
                        float: right;
                        p{
                            font-size: p(22);
                            color: #494949;
                            text-align: right;
                            margin-right: p(16);
                            margin-top: p(20);
                        }
                        p:nth-child(1){
                            margin-bottom: p(71);
                        }
                    } 
                }
            }
        }
        
    }
    //底部
    footer{
        width: 100%;
        margin: 0 auto;
        margin-bottom: p(14);
        margin-top: p(17);
        height: p(108);
        a{
            display: inline-block;
            width: 23%;
            text-align: center;
            font-size: p(26);
            color: #000;
            .img{
                width:p(60) ;
                height:p(60) ;
                overflow: hidden;
                margin: 0 auto;
                img{
                   height: 100%; 
                }
            }
        }
    }
}
